<template>
  <div class="dashboard">
    <el-row :gutter="20">
      <!-- 统计卡片 -->
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon question-icon">
              <i class="el-icon-document"></i>
            </div>
            <div class="stat-info">
              <div class="stat-number">{{ stats.totalQuestions }}</div>
              <div class="stat-label">题目总数</div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon category-icon">
              <i class="el-icon-folder"></i>
            </div>
            <div class="stat-info">
              <div class="stat-number">{{ stats.totalCategories }}</div>
              <div class="stat-label">分类总数</div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon user-icon">
              <i class="el-icon-user"></i>
            </div>
            <div class="stat-info">
              <div class="stat-number">{{ stats.totalUsers }}</div>
              <div class="stat-label">用户总数</div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon active-icon">
              <i class="el-icon-s-data"></i>
            </div>
            <div class="stat-info">
              <div class="stat-number">{{ stats.activeUsers }}</div>
              <div class="stat-label">活跃用户</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-top: 20px;">
      <!-- 最近新增题目 -->
      <el-col :span="12">
        <el-card>
          <div slot="header">
            <span>最近新增题目</span>
            <el-button style="float: right; padding: 3px 0" type="text" @click="goToQuestions">
              查看更多
            </el-button>
          </div>
          <el-table :data="recentQuestions" style="width: 100%">
            <el-table-column prop="title" label="题目" width="200">
              <template slot-scope="scope">
                <el-tooltip :content="scope.row.title" placement="top">
                  <span>{{ scope.row.title.length > 20 ? scope.row.title.substring(0, 20) + '...' : scope.row.title }}</span>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column prop="category" label="分类" width="100"></el-table-column>
            <el-table-column prop="type" label="题型" width="80"></el-table-column>
            <el-table-column prop="createTime" label="创建时间" width="120"></el-table-column>
          </el-table>
        </el-card>
      </el-col>
      
      <!-- 学习活跃度统计 -->
      <el-col :span="12">
        <el-card>
          <div slot="header">
            <span>学习活跃度统计</span>
          </div>
          <div class="chart-container">
            <div ref="activityChart" style="width: 100%; height: 300px;"></div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-top: 20px;">
      <!-- 快速操作 -->
      <el-col :span="24">
        <el-card>
          <div slot="header">
            <span>快速操作</span>
          </div>
          <el-row :gutter="20">
            <el-col :span="6">
              <el-button type="primary" icon="el-icon-plus" @click="goToAddQuestion" style="width: 100%; height: 60px;">
                新增题目
              </el-button>
            </el-col>
            <el-col :span="6">
              <el-button type="success" icon="el-icon-folder-add" @click="goToAddCategory" style="width: 100%; height: 60px;">
                新增分类
              </el-button>
            </el-col>
            <el-col :span="6">
              <el-button type="warning" icon="el-icon-upload" @click="goToImport" style="width: 100%; height: 60px;">
                批量导入
              </el-button>
            </el-col>
            <el-col :span="6">
              <el-button type="info" icon="el-icon-s-data" @click="goToAnalytics" style="width: 100%; height: 60px;">
                查看报表
              </el-button>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'AdminDashboard',
  data() {
    return {
      stats: {
        totalQuestions: 1250,
        totalCategories: 45,
        totalUsers: 3200,
        activeUsers: 856
      },
      recentQuestions: [
        {
          title: 'Vue.js 中如何实现组件通信？',
          category: '前端开发',
          type: '选择题',
          createTime: '2024-01-15'
        },
        {
          title: 'MySQL 索引优化策略有哪些？',
          category: '数据库',
          type: '填空题',
          createTime: '2024-01-14'
        },
        {
          title: 'JavaScript 闭包的概念和应用',
          category: 'JavaScript',
          type: '代码题',
          createTime: '2024-01-13'
        },
        {
          title: 'React Hooks 的使用方法',
          category: '前端开发',
          type: '选择题',
          createTime: '2024-01-12'
        },
        {
          title: 'Python 装饰器的实现原理',
          category: 'Python',
          type: '代码题',
          createTime: '2024-01-11'
        }
      ]
    }
  },
  mounted() {
    this.initActivityChart();
  },
  methods: {
    goToQuestions() {
      this.$router.push('/questions');
    },
    goToAddQuestion() {
      this.$router.push('/questions?action=add');
    },
    goToAddCategory() {
      this.$router.push('/questions?action=add-category');
    },
    goToImport() {
      this.$router.push('/questions?action=import');
    },
    goToAnalytics() {
      this.$router.push('/question-analytics');
    },
    initActivityChart() {
      // 这里可以集成 ECharts 来显示活跃度图表
      // 暂时用简单的 div 占位
      console.log('初始化活跃度图表');
    }
  }
}
</script>

<style scoped>
.dashboard {
  padding: 20px;
}

.stat-card {
  margin-bottom: 20px;
}

.stat-content {
  display: flex;
  align-items: center;
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  font-size: 24px;
  color: white;
}

.question-icon {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.category-icon {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.user-icon {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.active-icon {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.stat-info {
  flex: 1;
}

.stat-number {
  font-size: 28px;
  font-weight: bold;
  color: #303133;
  line-height: 1;
}

.stat-label {
  font-size: 14px;
  color: #909399;
  margin-top: 5px;
}

.chart-container {
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fafafa;
  border-radius: 4px;
}
</style>
